<template>
  <div class="classify">
    <ArticleTitle></ArticleTitle>
    <div class="classify-container">
      <div class="classify-item"><router-link to="opertion"> 操作系统</router-link></div>
      <div class="classify-item"><router-link to="record"> 踩坑记录</router-link></div>
      <div class="classify-item"><router-link to="interview"> 面试及解答</router-link></div>
      <div class="classify-item"><router-link to="mysql"> Mysql</router-link></div>
      <div class="classify-item"><router-link to="language"> Golang</router-link></div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import ArticleTitle from '@/components/ArticleTitle.vue'
import ArticleItem from '@/components/ArticleItem.vue'
export default {
  name: 'Classify',
  components: {
    ArticleTitle,
    ArticleItem
  }
}
</script>

<style lang="less" scoped>
.classify {
  width: 680px;
  margin: 50px auto;
  .classify-container {
    display: flex;
    // height: 90px;
    border: 1px solid #ccc;
    text-align: center;
    .classify-item {
      width: 100px;
      // height: 90px;
      margin: 30px auto;
      border: 1px solid #ccc;
      border-radius: 10px;
      align-items: center;
    }
  }
}
</style>
